<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" />
    <!-- 登录表单 -->
    <van-cell-group>
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="errorMobileText"
        @input="validate"
      />
       <!-- error-message="手机号格式错误" 错误提示信息 空字符串是不显示 -->
      <van-field
        v-model="code"
        required
        label="验证码"
        placeholder="请输入验证码"
        :error-message="errorCodeText"
        @input="validate"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
   <div class="login-btn">
      <van-button type="info" @click="login">登录</van-button>
   </div>
   <van-button type="primary" @click="getUserInfo">获取个人资料</van-button>
   <van-button type="primary" @click="getChannels">获取频道列表</van-button>
  </div>
</template>

<script>
// ctrl + k ctrl + 0
import { reqLogin, reqGetUserProfile, reqGetUserFollowings } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  // 添加name属性是为了方便在dev-tools中调试
  name: 'Login',
  created () {
    console.log(this.$route)
  },
  data () {
    return {
      mobile: '17611183627', // 手机号
      code: '246810', // 验证码
      errorMobileText: '', // 手机号错误的提示文本
      errorCodeText: '' // 验证那的错误提示文本
    }
  },
  methods: {
    // ...mapMutations('模块名',['mutation名'])
    ...mapMutations('user', ['setTokenInfo']),
    // 定一个校验的方法
    validate () {
      // 做校验工作
      // 1.非空校验手机号
      if (this.mobile.trim().length === 0) {
        // console.log('手机号不能为空')
        this.errorMobileText = '手机号不能为空'
        return false
      }
      // 手机号的合法校验
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.errorMobileText = '请输入11位正确的手机号'
        return false
      }
      // 如果两个规则都通过, 应该将手机错误提示设置为空
      this.errorMobileText = ''
      // 2.非空校验验证码
      if (!this.code.trim().length) {
        this.errorCodeText = '验证码不能为空'
        return false
      }
      // 验证码的合法校验
      if (!/^\d{6}$/.test(this.code)) {
        this.errorCodeText = '请输入6位数字的验证码'
        return false
      }
      // 如果两个规则都通过, 应该将验证码错误提示设置为空
      this.errorCodeText = ''
      return true
    },
    // 登录请求
    async login () {
      // const res = await this.$http.post('v1_0/authorizations', { mobile: this.mobile, code: this.code })
      if (!this.validate()) return console.log('校验没有通过')
      // 点击登录按钮后,加载提示状态
      this.$toast.loading({
        message: '拼命加载中...',
        forbidClick: true, // 禁止背景点击
        overlay: true, // 显示遮罩
        duration: 0 // 遮罩展示的时长, 默认值是2s 设置为0就不隐藏的, 不知道请求什么时候回来
      })
      // const res = await this.$http({
      //   method: 'post',
      //   url: 'v1_0/authorizations',
      //   data: {
      //     mobile: this.mobile, code: this.code
      //   }
      // })
      const res = await reqLogin(this.mobile, this.code)
      // 轻提示 toast 单例模式 在同一时间 只允许展示一个toast, 下一个toast会将上一个覆盖掉
      this.$toast.success('登录成功')
      console.log(res)
      // 提交存储token信息的mutation
      // this.$store.commit('模块名/mutation名', 参数)
      // 原始写法
      // this.$store.commit('user/setTokenInfo', res.data.data)
      // 使用辅助函数映射过来的方法
      this.setTokenInfo(res.data)
      // 登录成功后使用 编程式导航的方式跳转到 /
      // this.$router.push('/')
      // 先判断一下有没有backTo这个属性 有的话应该原路返回 ,没有的话 去首页
      const backTo = this.$route.query.backTo
      if (backTo) {
        // this.$router.push(backTo) // push会新增历史记录
        this.$router.back()
      } else {
        this.$router.push('/')
      }
      // this.$router.push(this.$route.query.backTo || '/')
    },
    // 测试接口 获取个人资料
    async getUserInfo () {
      const res = await reqGetUserProfile()
      console.log(res)
    },
    // 测试接口 获取频道列表
    async getChannels () {
      const res = await reqGetUserFollowings()
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-btn {
  padding: 20px;
  .van-button{
    width: 100%;
    border-radius: 5px;
  }
}
</style>
